<template>
  <view class="padding-sm">
    <view class="cu-bar bg-white">
      <view class="action border-title">
        <text class="text-xl text-bold text-blue">{{ visitTitle }}</text>
        <text class="bg-gradual-blue" style="width:3rem"></text>
      </view>
    </view>
    <!-- 步骤描述条 -->
    <view class="app-body" v-if="stepInfo.stepTitle">
      <uni-section class="mb-10" :title="stepInfo.stepTitle" :sub-title="stepInfo.createTime">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
      </uni-section>
      <!-- 随访表单 -->
      <view class="module-form" v-if="moduleFormList && moduleFormList.length > 0">
        <template v-for="(moduleForm, index1) in moduleFormList">
          <uni-forms :modelValue="moduleFormList[index1]" :rules="rules" ref="form" validate-trigger="bind">
            <uni-group :key="index1" :title="moduleForm.moduleName" mode="card">
              <template v-for="(item, index2) in moduleForm.fieldList">
                <uni-forms-item :key="index2" required
                  :name="['fieldList',  index2, 'fieldValue']" :rules="[{required: true,errorMessage: '随访内容必须填写'}]">
                  <uni-easyinput v-if="item.fieldType === 0" type="text"
                    v-model="moduleFormList[index1].fieldList[index2].fieldValue"
                    :placeholder="'请输入' + item.fieldName" />
                  <view class="number-box-container" v-else>
                    <uni-number-box v-model="moduleFormList[index1].fieldList[index2].fieldValue" :min="0" :max="10"
                      type="line" />
                    <!-- 描述 -->
                    <view class="field-desc">{{ '请输入' + item.fieldName + '评分'}}</view>
                  </view>
                </uni-forms-item>
              </template>
            </uni-group>
          </uni-forms>
        </template>
      </view>
    </view>
    <view v-else>
      <empty-page container-height="100px" text="无随访步骤信息" />
    </view>

    <!-- 按钮 -->
    <view class="cu-bar btn-group">
      <button class="cu-btn bg-blue shadow-blur" @click="cancel" type="">取消</button>
      <button class="cu-btn bg-green shadow-blur" @click="confirm" type="">确定</button>
    </view>


    <!-- 对话框 -->
    <view class="cu-modal" :class="modalName=='DialogModal'?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view class="content">提交随访</view>
          <view class="action" @tap="hideModal">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="padding-xl">
          确认要提交随访？
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
            <button class="cu-btn bg-green margin-left" @tap="confirmDialog">确定</button>
          </view>
        </view>
      </view>
    </view>
  </view>


</template>

<script>
  export default {
    onLoad(options) {
      this.visitTitle = options.title;
      this.stepInfo.id = options.id;
      this.getDataForm();
    },
    methods: {
      // 提交数据前先进行校验
      async submitData() {
        const length = this.$refs.form.length;
        let validCount = 0;
        for (let i = 0; i < length; i++) {
          try {
            await this.$refs.form[i].validate();
            validCount++;
          } catch (err) {
            console.log('表单错误信息：', err);
          }
        }
        // 判断校验结果
        if (validCount !== length) {
          return;
        }
        // 封装表单信息
        const data = {
          moduleList: this.moduleFormList,
          stepId: this.stepInfo.stepId
        };
        try {
          const {
            data: res
          } = await uni.$http.post('/visit/confirm', data);
          // 判断是否获取失败
          if (res.code !== 200) {
            return uni.$showMsg("提交随访失败");
            return;
          }
          this.cancel();
        } catch (error) {
          // 处理错误
          console.error(error);
        }
      },
      async confirmDialog() {
        await this.submitData();
        this.hideModal();
        // 返回上一页
      },
      // 确认
      confirm() {
        this.modalName = 'DialogModal'
      },
      hideModal() {
        this.modalName = ''
      },
      // 取消
      cancel() {
        uni.navigateBack({
          delta: 1
        });
      },
      async getDataForm() {
        const id = this.stepInfo.id;
        const {
          data: res
        } = await uni.$http.get(`/visit/form/${id}`)
        // 判断是否获取失败
        if (res.code !== 200) return uni.$showMsg()
        this.moduleFormList = res.data.moduleList;
        this.stepInfo = res.data.stepInfo;
      }
    },
    data() {
      return {
        visitTitle: "",
        title: "",
        stepInfo: {},
        moduleFormList: [],
        modalName: ''
      }
    }

  }
</script>

<style lang="scss">
  .app-body {
    margin-top: 20px;

    .module-form {
      padding: 5px;
      // margin-top: 20px;
      background-color: white;

      .number-box-container {
        width: 400px;
        height: 40px;
        display: flex;
        align-items: center;
        overflow-x: auto;

        /* 调整此处的数值来控制与右侧的距离 */
        .field-desc {
          white-space: nowrap;
          /* 不换行 */
          padding-right: 10px;
          margin-left: 5px;
          font-size: 12px;
          color: #8799a3;
        }
      }
    }
  }

  .decoration {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #1cbbb4;
  }
</style>